<template>
  <div style="padding: 0 10px">
    <div class="input-bg">
      <input type="text" placeholder="请输入userID"  @keyup.enter="handleInput" v-model="userId" @mouseleave="handleInputLeave"/>
    </div>
    <div class="list-item" v-for="(item, index) in list" :key="index" @dblclick="handleCurrentConversation(item)">
      <img
          class="avatar"
          :src="item?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
          onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
      />
      <span class="name">{{ item?.nick || item?.userID }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
const CustomSearch = defineComponent({
  name: 'CustomSearch',
  setup(props: any, ctx: any) {
    const TUIServer = CustomSearch?.TUIServer;

    const data = reactive({
      list: [],
      userId: '',
      perUserId: '',
    });
    const handleInputLeave = async () => {
      try {
        if(data.userId && data.userId != data.perUserId){
          const imResponse: any = await TUIServer.getUserProfile([data.userId]);
          if(imResponse.code == 0){
            data.list = imResponse.data
            data.perUserId = data.userId
            if(1==data.list.length){
              handleCurrentConversation(data.list[0])
            }
          }
        }
      } catch (error) {
        console.log(JSON.stringify(error))
      }
    };

    const handleInput = async () => {
      try {
        const imResponse: any = await TUIServer.getUserProfile([data.userId]);
        if(imResponse.code == 0){
          data.list = imResponse.data
          data.perUserId = data.userId
          if(1==data.list.length){
            handleCurrentConversation(data.list[0])
          }
        }
      } catch (error) {
        console.log(JSON.stringify(error))
      }
    };

    const handleCurrentConversation = (item: any) => {
      let conversationId = `C2C${item.userID}`
      TUIServer.getConversationProfile(conversationId).then((imResponse: any) => {
        // 通知 TUIConversation 模块切换当前会话
        TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation(imResponse.data.conversation);
        //清空
        data.list = [];
        data.userId = "";
        data.perUserId = "";
      });
    };

    return {
      ...toRefs(data),
      handleInput,
      handleInputLeave,
      handleCurrentConversation
    }
  }
});
export default CustomSearch;
</script>

<style lang="scss" scoped>
  .input-bg{
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    border: 1px solid #EEEEEE;
    border-radius: 50px;
    margin-top: 10px;

    input{
      border: none;
      padding: 0 20px;
    }
  }

  .list-item{
    margin: 10px;

    .avatar{
      width: 50px;
      height: 50px;
      border-radius: 30px;
    }
    .name{
      font-size: 15px;
      font-weight: bold;
      color: #222222;
      margin-left: 10px;
    }
  }


</style>
